<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能生态箱</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <h1>🌿 智能生态箱</h1>
        <div class="connection-status" id="connectionStatus">
            <span class="status-dot" id="statusDot"></span>
            <span id="statusText">未连接</span>
        </div>
    </header>

    <!-- MQTT连接配置面板 -->
    <section class="config-panel">
        <h2>⚙️ MQTT配置</h2>
        <div class="config-form">
            <div class="form-group">
                <label>服务器地址:</label>
                <input type="text" id="mqttHost" value="broker.emqx.io" placeholder="broker.emqx.io">
            </div>
            <div class="form-group">
                <label>端口:</label>
                <input type="number" id="mqttPort" value="8083" placeholder="8083">
            </div>
            <div class="form-group">
                <label>主题:</label>
                <input type="text" id="mqttTopic" value="qtmqtt/topic1" placeholder="qtmqtt/topic1">
            </div>
            <div class="form-group">
                <label>订阅主题:</label>
                <input type="text" id="mqttSubTopic" value="McuToClient" placeholder="McuToClient">
            </div>
            <button id="connectBtn" class="btn btn-primary">连接</button>
        </div>
    </section>

    <!-- 页面切换导航 -->
    <nav class="page-nav">
        <button class="nav-btn active" data-page="page1" id="navPage1">📊 监控</button>
        <button class="nav-btn" data-page="page2" id="navPage2">🌡️ 温度图表</button>
        <button class="nav-btn" data-page="page3" id="navPage3">💧 湿度图表</button>
    </nav>

    <!-- 主内容区域 - Page 1 监控页面 -->
    <main class="main-content page-content" id="page1">
        <!-- 温度卡片 -->
        <div class="card">
            <div class="card-header">
                <h3>🌡️ 温度监控</h3>
                <button class="btn btn-sm" id="tempSettingBtn">设置</button>
            </div>
            <div class="card-body">
                <div class="metric-display">
                    <div class="metric-value" id="tempValue">--°C</div>
                    <div class="metric-status" id="tempStatus">等待数据...</div>
                </div>
                <div class="threshold-info">
                    <span>阈值范围: <span id="tempRange">10-30°C</span></span>
                </div>
            </div>
        </div>

        <!-- 湿度卡片 -->
        <div class="card">
            <div class="card-header">
                <h3>💧 湿度监控</h3>
                <button class="btn btn-sm" id="humidSettingBtn">设置</button>
            </div>
            <div class="card-body">
                <div class="metric-display">
                    <div class="metric-value" id="humidValue">--%</div>
                    <div class="metric-status" id="humidStatus">等待数据...</div>
                </div>
                <div class="threshold-info">
                    <span>阈值范围: <span id="humidRange">30-70%</span></span>
                </div>
            </div>
        </div>

        <!-- 食物卡片 -->
        <div class="card">
            <div class="card-header">
                <h3>🍖 食物监控</h3>
                <button class="btn btn-sm" id="foodSettingBtn">设置</button>
            </div>
            <div class="card-body">
                <div class="metric-display">
                    <div class="metric-value" id="foodValue">剩余--</div>
                </div>
                <button class="btn btn-feeding" id="feedingBtn">🍖 投喂</button>
            </div>
        </div>

        <!-- 环境光卡片 -->
        <div class="card">
            <div class="card-header">
                <h3>💡 环境光控制</h3>
            </div>
            <div class="card-body">
                <div class="metric-display">
                    <div class="metric-value" id="alsValue">--</div>
                    <div class="metric-status">环境光亮度</div>
                </div>
                <button class="btn btn-light" id="lightToggleBtn">
                    <span id="lightIcon">💡</span> 
                    <span id="lightText">开启环境光</span>
                </button>
            </div>
        </div>

    </main>

    <!-- Page 2 温度图表页面 -->
    <section class="page-content" id="page2" style="display: none;">
        <div class="chart-container">
            <div class="chart-header">
                <h2>🌡️ 温度变化趋势图</h2>
                <div class="chart-info">
                    <span>当前温度: <strong id="chartTempValue">--°C</strong></span>
                    <span>阈值范围: <strong id="chartTempRange">10-30°C</strong></span>
                </div>
            </div>
            <canvas id="tempChart"></canvas>
        </div>
    </section>

    <!-- Page 3 湿度图表页面 -->
    <section class="page-content" id="page3" style="display: none;">
        <div class="chart-container">
            <div class="chart-header">
                <h2>💧 湿度变化趋势图</h2>
                <div class="chart-info">
                    <span>当前湿度: <strong id="chartHumidValue">--%</strong></span>
                    <span>阈值范围: <strong id="chartHumidRange">30-60%</strong></span>
                </div>
            </div>
            <canvas id="humidChart"></canvas>
        </div>
    </section>

    <!-- 消息日志 -->
    <section class="log-panel">
        <h3>📋 消息日志</h3>
        <div class="log-content" id="logContent"></div>
        <button class="btn btn-sm" id="clearLogBtn">清空日志</button>
    </section>

    <!-- 库文件 -->
    <script src="https://unpkg.com/mqtt@5.3.4/dist/mqtt.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

